<template>
	<view class="content">
		<view class="row">
			<view class="col-18" v-if="obj.realTimeSurplusMileageDrivergo">
				司机距您<text>{{obj.realTimeSurplusMileageDrivergo}}米</text>，预计<text>{{obj.realTimeSurplusTimeDrivergo}}分钟</text>后到达，请耐心等待。
			</view>
			<view class="col-18" v-else>
				{{obj.tipMsg}}
			</view>
			<view class="col-5 pdl-1 t_center">
				<view class="img">
					<image src="../../static/trip/dh@2x.png" mode="heightFix"></image>
				</view>
				<view class="img_title">
					联系司机
				</view>
			</view>
		</view>
		<view class="qksm" v-if="obj.userCancelPrice == 0">
			本次取消免费，多次取消后可能会影响叫车服务。
		</view>
		<view class="qksm" v-else>
			{{obj.tipMsg}}
		</view>
		<view class="qxgz t_center">
			<text @click="$public.navTo('public/webView?url=' + obj.cancelOrderRuleLink)">查看取消规则</text>
		</view>
		<view class="row">
			<view class="col-11">
				<button type="primary" @click="$public.navTo('index/status_reason?orderId=' + obj.orderId)">确认取消</button>
			</view>
			<view class="col-11 off-2">
				<button type="warn" @click="back()">暂不取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				obj: {
					cancelOrderRuleLink: "",
					realTimeSurplusMileageDrivergo : 0,
					realTimeSurplusTimeDrivergo : 0,
					orderId: 811,
					tipMsg: "",
					userCancelPrice: 0
				}
			}
		},
		onLoad(option) {
			this.obj = JSON.parse(option.res);
		},
		methods:{
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.content{
		width: 92%;
		padding: 50rpx 4%;
		border-top: 1px solid #ededed;
	}
	
	.col-18{
		line-height: 1.5;
		font-size: 44rpx;
		color: #333333;
		font-weight: bold;
		text{
			color: #6CBF30;
		}
	}

	.col-5{
		position: relative;
		top: -10rpx;
		.img{
			image{
				height: 90rpx;
			}
			margin-bottom: 10rpx;
		}
		.img_title{
			height: 30rpx;
			line-height: 30rpx;
			font-size: 24rpx;
			color: #333333;
		}
	}

	.qksm{
		width: 92%;
		padding: 0 4%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		margin-top: 45rpx;
		color: #FFAE00;
		background-color: #fff7e5;
	}
	
	.qxgz{
		margin-top: 39rpx;
		color: #6CBF30;
		font-size: 26rpx;
		text{
			text-decoration: underline;
		}
	}

	button{
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 48rpx;
		margin-top: 60rpx;
		font-size: 32rpx;
	}

	button[type="primary"]{
		background-color: #FFFFFF;
		color: #6CBF30;
		border: 1px solid #6CBF30;
	}
	
	button[type="warn"]{
		background-color: #6CBF30;
	}
</style>
